/*
 * @FilePath     : /study_code/css/style/common.css
 * @Description  : 常用，手写，全局公共 CSS 样式
 * @Date         : 2025-04-28 15:42:37
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-28 15:42:40
 */
/* 所有容器都改为 “边框盒子” */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 14px;
}
body {
  height: 100%;
  color: #333;
  min-width: 1240px;
  /* tip:
  1em 是按照父元素 html 的 14px数值 当做基本单位；
  1.4 是行高按 1.4 的比例；
  字体：
  Microsoft Yahei 微软雅黑
  PingFang SC 苹方
   */
  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC';
}

ul,
h1,
h3,
h4,
p,
dl,
dd {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
  outline: none;
}

i {
  font-style: normal;
}

input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {
  padding: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;
  &::placeholder {
    color: #ccc;
  }
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

ul {
  /* 去无序列表的默认样式 */
  list-style: none;
}

#app {
  background: #f5f5f5;
  user-select: none;
}

.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.ellipsis {
  /* 单行文本溢出显示 ... */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-2 {
  /* n 行文本溢出显示 ... tip: IE不兼容 */
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清浮动（浮动造成的高度坍塌问题） */
.clearfix:after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}

/* 分隔线方法1 （通过伪元素实现，宽度自适应，浏览器兼容方面 IE10 及以下不兼容） --- start */
/* 使用：<div class="hr">分隔线</div>  */
.hr {
  display: flex;
  align-items: center;
}

.hr::after,
.hr::before {
  content: '';
  flex: 1;
  height: 1px;
  background: #000;
}

.hr::before {
  margin-right: 10px;
}

.hr::after {
  margin-left: 10px;
}
/* 分隔线方法1 --- end */

/* 方法2：用 fieldset, legend 标签实现（见 index.html） */

/* 解决 margin 传递问题 （外容器 伪类 设置 display: table 的 空内容 */
.margin-transmit_reset::before {
  content: '';
  display: table;
}

/* margin 重叠：尽量只给到一个元素（给到下面/右边，考虑其可能消失的情况） */
